<style>
	.img_selector_btn{margin-left:10px;}
	#img_selector_!{$item.id} .img_wrap{padding:2px;border:1px solid transparent;border-radius:4px;margin-bottom:10px;margin-right:10px;}
	#img_selector_!{$item.id} .img_wrap:hover{border-color:#2694E8;background:white;box-shadow:0 1px 2px #2694E8 inset, 0 0 8px #2694E8;outline:0 none;}
</style>
<div class="form_item form_item_image form_item_image_multiple" id="img_selector_!{$item.id}">
	<strong>!{if $item.required eq true}<span class="red">*</span>!{/if}!{$item.name}：</strong>
	<div class="picture_selector">
		!{if $item.value}
		!{foreach from=$item.value item=p}
		<i class="img_wrap">
		<img class="auto_img delete_able" alt="" src="!{res file=$p thumb='64x64'}"/>
		<input type="hidden" value="!{res file=$p thumb='64x64'}" name="!{$item.id}[]">
		</i>
		!{/foreach}
		!{else}
		<img class="auto_img no_pic" alt="没有图片" src="!{res file='images/no_pic.jpg' thumb='64x64'}"/>
		!{/if}
		<input type="button" class="img_selector_btn button" value="添加图片"/>
	</div>
	<p>!{$item.desc}</p>
</div>
<script>
	$(function(){
		$("#img_selector_!{$item.id} .img_selector_btn").picture_selector({multiple:true, on_select:function(imgs){
			$('#img_selector_!{$item.id} .picture_selector .no_pic').parent().remove();
			for(i=0,c=imgs.length;i<c;++i){
				var src = imgs[i].src;
				var file_id = imgs[i].file_id;
				src = src.replace(/(\/\d+x\d+\/)/img, "/64x64/");
				if($('#img_selector_!{$item.id} .auto_img[src="'+src+'"]').length)continue;
				$("#img_selector_!{$item.id} .picture_selector .img_selector_btn").before('<img file_id="'+file_id+'" class="auto_img delete_able" alt="" src="'+src+'"/>');
			}
			$("#img_selector_!{$item.id} .auto_img").auto_img({
				ready:function(obj){
					if($(obj).find('input').length)return;
					var src = $(obj).find('img').attr('src');
					$(obj).append('<input type="hidden" value="'+src+'" name="!{$item.id}[]">');
				}
			});
		}});
	});
</script>